/*
    ActionStripDemo.js
    Copyright (C) 2010, Donald W. Griffin
    All Rights Reserved
*/

function echo (s) {
    function fn () {
        alert(s);
    }
    fn.defer(10);
}

function getGrid () {
    var actions = new Wdg.GridActions({
        actionSelectsItem: false,
        id: "RowActions",
        scope: this,
        actions: [
            {
                hide: function (rd) {
                    var st = rd.values;
                    return st.size < 5000 && st.size % 2;
                },
                icon: "rowAction1",
                fn: function (ed) {
                    ed.selectItem = true;
                    echo("Action: " + ed.item.name);
                },
                qtip: "Some action"
            },
            {
                align: "right",
                icon: "rowAction3",
                fn: function (ed) {
                    var v = Math.random() * 9999 + 1;
                    ed.record.set("size", Math.floor(v));
                },
                qtip: "Roll the dice"
            },
            {
                align: "center",
                icon: "rowAction4",
                fn: function (ed) {
                    echo("Clue: " + ed.item.name);
                },
                qtip: "Get a clue"
            },
            {
                align: "pre",
                icon: "rowAction5",
                group: true,
                fn: function (ed) {
                    echo("Action5: " + ed.records.length + " records");
                },
                qtip: "Batch"
            },
            {
                align: "left",
                icon: "rowAction6",
                group: true,
                fn: function (ed) {
                    echo("Action6: " + ed.records.length + " records");
                },
                qtip: "Batch"
            },
            {
                align: "center",
                icon: "rowAction7",
                group: true,
                fn: function (ed) {
                    echo("Action7: " + ed.records.length + " records");
                },
                qtip: "Batch"
            },
            {
                align: "right",
                icon: "rowAction8",
                group: true,
                fn: function (ed) {
                    echo("Action8: " + ed.records.length + " records");
                },
                qtip: "Batch"
            },
            {
                align: "pre",
                icon: "rowAction9",
                cells: ["name", "size"],
                fn: function (ed) {
                    echo("Action9: " + ed.item.name);
                },
                qtip: "Action 9"
            },/**/
            {
                align: "left",
                icon: "rowAction10",
                cell: "name",
                fn: function (ed) {
                    echo("Action 10: " + ed.item.name);
                },
                qtip: "Action 10"
            },/**/
            {
                align: "right",
                icon: "rowAction11",
                cell: "name",
                fn: function (ed) {
                    echo("Action 11: " + ed.item.name);
                },
                qtip: "Action 11"
            },/**/
            {
                align: "center",
                icon: "rowAction12",
                hide: function (rd) {
                    var st = rd.values;
                    return st.size < 5000 && st.size % 2 == 0;
                },
                cells: ["name", "RowActions"],
                fn: function (ed) {
                    echo("Action 12: " + ed.item.name);
                },
                qtip: "Action 12"
            },/**/
            {
                actionSelectsItem: true,
                group: true,
                cell: "RowActions",
                always: false,
                hide: function (rd) {
                    var st = rd.values;
                    return st ? (st.size < 5000 && st.size % 2 == 0) : false;
                },
                icon: "rowAction2",
                fn: function (ed) {
                    if (ed.item)
                        echo("Other Action: " + ed.item.name);
                    else
                        echo("Other Action: " + ed.records.length + " records");
                },
                tip: "Some other action"
            }
        ]
    });

    var grid = {
        xtype: "grid",
        id: "theGrid",
        plugins: [actions],
        remoteSort: false,
        store: new Ext.data.GroupingStore({
            data: [
                [ "File A", "/abc", 4567 ],
                [ "File B", "/abc", 5678 ],
                [ "File X", "/xyz", 1234 ],
                [ "File Y", "/xyz", 2345 ],
                [ "File Z", "/xyz", 3456 ]
            ],
            reader: new Ext.data.ArrayReader({
                fields: [
                    { name: "name", type: "string" },
                    { name: "folder", type: "string" },
                    { name: "size", type: "int" }
                ]
            }),
            groupField: "folder",
            sortInfo: { field: "name", direction: "ASC" }
        }),
        columns: [
            { header: "Name", id: "name", width: 200, dataIndex: "name", sortable: true },
            { header: "Folder", id: "folder", width: 200, dataIndex: "folder",
              sortable: true },
            { header: "Size", id: "size", width: 80,  dataIndex: "size", sortable: true }
        ],
        view: new Ext.grid.GroupingView({
            hideGroupedColumn: true
        })
    };

    grid.columns.push(actions);

    return grid;
}

function getStore (fields, data) {
    var store = new Ext.data.Store({
        reader: new Ext.data.JsonReader({
            fields: fields
        })
    });

    var T = store.recordType, recs = [], idProp = fields[0].name;

    Ext.each(data, function (rd) {
        recs.push(new T(rd, rd[idProp]));
    });

    store.add(recs);
    return store;
}

function getTreeFileStore () {
    var store = getStore([
            { name: "id", type: "int" },
            "name",
            "descr",
            { name: "size", type: "int" }
        ],
        arguments
    );

    return store;
}

function getTreeFileStore1 () {
    var store = getTreeFileStore(
            { id: 101, name: "File 1a", descr: "The first file", size: 110 },
            { id: 102, name: "File 2a", descr: "The second file", size: 120 },
            { id: 103, name: "File 3a", descr: "The third file", size: 150 }
        );

    return store;
}

function getTreeFileStore2 () {
    var store = getTreeFileStore(
            { id: 201, name: "File 1b", descr: "The fourth file", size: 200 },
            { id: 202, name: "File 2b", descr: "The fifth file", size: 230 },
            { id: 203, name: "File 3b", descr: "The sixth file", size: 270 }
        );

    return store;
}

function getTreeSubStore () {
    var store = getStore([
            { name: "id", type: "int" },
            "name",
            "descr",
            { name: "active", type: "bool" }
        ],
        [
            { id: 500, name: "Sub1", descr: "Bad!", summary: "Yes!", active: true },
            { id: 501, name: "Sub2", descr: "Bad!", summary: "Yes 2!", active: false }
        ]
    );

    return store;
}

function getTreeGrid () {
    var actions = new Wdg.TreeGridRowActions({
        actionSelectsItem: false,
        scope: this,
        actions: [
            {
                hide: function (ev) {
                    var st = ev.values;
                    return st.leaf;
                },
                icon: "rowAction1",
                id: "treeAction1",
                fn: function (ev) {
                    ev.swallow = false;
                    echo("Action: " + ev.values.name);
                },
                qtip: "Some action"
            },
            {
                hide: function (ev) {
                    var st = ev.values;
                    return !st.leaf;
                },
                icon: "rowAction2",
                id: "treeAction2",
                fn: function (ev) {
                    echo("Other Action: " + ev.values.name);
                },
                qtip: "Some other action"
            }
        ]
    });
    var files1 = getTreeFileStore1(), files2 = getTreeFileStore2();
    var subs = getTreeSubStore();

    var altCols1 = new Wdg.TreeGridColumnModel({
        columns: [
            { header: "Name", dataIndex: "name", editable: true },
            { header: "Summary", dataIndex: "summary", editable: true },
            //undefined, // no column
            {
                header: "Active", dataIndex: "active", editable: true,
                xtype: "booleancolumn",
                renderer: function (node) {
                    return node.attributes.active ? "Yes" : "No";
                }
            },
            null // pass thru column
        ],
        //mode: "self",
        recType: subs.recordType
    });

    var editor = new Wdg.TreeGridEditor({
        //
    });

    var tree = {
        xtype: "treegrid",
        id: "theTreeGrid",
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [
                {
                    name: "Folder A", descr: "The first folder", store: files1,
                    children: [
                        {
                            recId: 101, store: subs, colModel: altCols1,
                            children: [
                                { recId: 500, leaf: true },
                                { recId: 501, leaf: true }
                            ]
                        },
                        { recId: 102, leaf: true },
                        { recId: 103, leaf: true}
                    ]
                },
                {
                    name: "Folder B", descr: "The second folder", store: files2,
                    children: [
                        { recId: 201, leaf: true },
                        { recId: 202, leaf: true },
                        { recId: 203, leaf: true }
                    ]
                }
            ]
        }),
        plugins: [altCols1, editor],
        columns: [
            { header: "Name", dataIndex: "name", width: 110 },
            { header: "Description", dataIndex: "descr", width: 150 },
            { header: "Size", dataIndex: "size", width: 50, editor: {xtype:"spinnerfield"} },
            actions
        ]
    };

    return tree;
}

function getForm () {
    var id = "theForm";
    var count = 0;

    var form = {
        layout: "form",
        id: id,
        tbar: [
            {
                text: "Add Item",
                handler: function () {
                    var form = Ext.getCmp(id);
                    ++count;
                    form.add({
                        xtype: "textfield",
                        fieldLabel: "New Field " + count,
                        value: "xyz",
                        id: "newField"+count
                    });
                    form.doLayout();
                }
            }
        ],
        tbar2: new Wdg.InfoBar(),
        plugins: [
            new Wdg.ToolbarMgr(),
            new Wdg.FormActions({
                actions: [
                    {
                        id: "fixProblem",
                        icon: "rowAction4",
                        qtip: "Add an error",
                        fn: function (ev) {
                            ev.form.tbar2.addError("Error");
                        },
                        hide: function (ev) {
                            if (ev.item.id === "whizbangField")
                                return !ev.value;
                            return !ev.value || ev.values.whizbangField;
                        }
                    }
                ]
            })
        ],
        items: [
            {
                fieldLabel: "Item Foo",
                xtype: "textfield",
                value: "Abc",
                id: "fooField"
            },
            {
                fieldLabel: "TimeField",
                xtype: "wdg-timefield",
                id: "timeField",
                //dropDownStyle: "border: 1px solid red;",
                emptyText: "Enter time"
            },
            {
                fieldLabel: "Item Bar",
                xtype: "combo",
                id: "barField",
                mode: "local",
                resizable: true,
                store: [
                    [10, "Foo"],
                    [20, "Bar"]
                ]
            },
            {
                fieldLabel: "Whizbang",
                xtype: "checkbox",
                checked: false,
                id: "whizbangField"
            }
        ]
    };

    return form;
}

Ext.onReady(function ()
{
    delete Ext.ux.form.SpinnerField.prototype.onBlur;

    var form = Ext.apply(getForm(), {
        title: "Form",
        region: "south",
        collapsible: true,
        split: true,
        height: 300
    })
    var grid = Ext.apply(getGrid(), {
        title: "Grid",
        region: "center"
    });

    var tree = Ext.apply(getTreeGrid(), {
        title: "TreeGrid",
        region: "west",
        collapsible: true,
        split: true,
        width: 400
    });

    Ext.QuickTips.init();

    _viewport = new Ext.Viewport({
        xtype: "panel",
        border: false,
        layout: "border",
        items: [ tree, grid, form ]
    });
});
